<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>账号绑定</title>
    <!-- Tell the browser to be responsive to screen width -->
    <link href="{{ static('img/photo2.png') }}" rel="shortcut icon">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="{{ static ('bootstrap/css/bootstrap.min.css') }}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ static ('fonts/font-awesome.min.css') }}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{{  static ('ionicons/ionicons.min.css') }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{  static ('css/AdminLTE.min.css') }}">
    <!-- iCheck -->
    <link rel="stylesheet" href="{{  static ('plugins/iCheck/square/yellow.css') }}">
    <!--<link href="{{ static('css/bootstrapValidator.min.css') }}" rel="stylesheet">-->
    <style type="text/css">

        .label-title{
            font-family: MicrosoftYaHei;
            font-size: 19px;
            color: #2A1919;
            text-align: center;
        }
        .login-page{
            background:url("{{ static('img/backgound2x.png') }}") no-repeat;
            background-size: 112%;
            margin-top:45px;
        }
        .btn-primary{
                background-color: #ffd300;
                border-color: #ffd300;
                width: 180px;
                height: 42px;
        }
        .btn-primary.hover {
                background-color:
        }
        .btn.hover {
                background-color: #ffd300;
        }
        .btn-block.hover {
                background-color: #ffd300;
        }
        .btn-flat.hover {
                background-color: #ffd300;
        }
        .btn.hover {
                background-color: #ffffff;
        }
        .btn-primary.hover {
        background-color: #ffd300;
        }

        .fa-icon{
            height: 52px;
            line-height: 52px;

        }
        .fa-icon img{
            vertical-align: middle;
        }





.login-box-body1, .register-box-body {
    /* background: #fff; */
    padding: 20px;
    border-top: 0;
    color: #666;
}
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition login-page">
{% if err_msg %}
<div class="alert alert-error alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    {{ err_msg }}
</div>
{% endif %}
<div class="login-box">
    <div class="label-title">
        <label>绑定账号,查收学习报告</label>
    </div><!-- /.login-logo -->
    <br/>
    <br/>

    <div class="login-box-body1">
        <form method="post">
            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
            <div class="form-group has-feedback">
                <input class="form-control f-course" id="user" placeholder="请输入账号" name="username"  style="height: 52px;" type="text"/>
                <span class="glyphicon  form-control-feedback fa-icon"><img id="user-img" src="{{ static('img/user1x.png') }}"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" id="pass" placeholder="请输入密码" name="password"  style="height: 52px;"
                       class="form-control f-course">
                <span class="glyphicon  form-control-feedback fa-icon"><img id="shape-img" src="{{ static('img/shape1x.png') }}"></span>
            </div>
            <br/><br/>


            <div class="row">
                <div class="col-xs-3"></div>
                <div>
                    <button type="submit" id="btn-click" class="btn btn-primary btn-block btn-flat" onclick="saveUserInfo();">绑定
                    </button>
                </div><!-- /.col -->
            </div>
        </form>


    </div><!-- /.login-box-body -->
</div><!-- /.login-box -->

<!-- jQuery 2.1.4 -->
<script src="{{  static ('plugins/jQuery/jQuery-2.1.4.min.js') }}"></script>
<!-- Bootstrap 3.3.5 -->
<script src="{{  static ('bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{  static ('js/jquery.cookie.js') }}"></script>
<!-- iCheck -->
<script src="{{  static ('plugins/iCheck/icheck.min.js') }}"></script>
<script type="text/javascript" src="{{ static('js/bootstrapValidator.min.js') }}"></script>
<script>

    $('form').bootstrapValidator({
//        live: 'disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: '账号不能为空'
                    },

                },
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },

                }
            },
        }

    });
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });
    $("#btn-click").on("mouseenter", function(event){
    $(this).css("background-color", "#ffc800");
    $(this).css("border-color", "#ffc800");
    });
    $("#btn-click").on("mouseleave", function(event){
    $(this).css("background-color", "#ffd300");
    $(this).css("border-color", "#ffd300");
    });
    $("#user").focus(function(){
        $(this).css("border-color", "#ffd300");
        $("#user-img").attr("src", "{{ static('img/user_hover1x.png') }}");

    });
    $("#pass").focus(function(){
        $(this).css("border-color", "#ffd300");
        $("#shape-img").attr("src", "{{ static('img/shape_hover1x.png') }}");

    });

    $(".f-course").blur(function(){
        $(this).css("border-color", "#f3F3F3");
        $("#user-img").attr("src", "{{ static('img/user1x.png') }}");
        $("#shape-img").attr("src", "{{ static('img/shape1x.png') }}");
    });

    $(document).ready(function () {
        if ($.cookie("rmbUser") == "true") {
            if ($("#rmbUser").prop("checked", true));
            $('.icheckbox_square-blue').addClass('checked');
            $('.icheckbox_square-blue').attr("aria-checked", "true");
            $("#user").val($.cookie("userName"));
            $("#pass").val($.cookie("passWord"));
        }
    });
    //保存用户信息
    function saveUserInfo() {
        if ($("#rmbUser").prop("checked")) {
            var userName = $("#user").val();
            var passWord = $("#pass").val();
            $.cookie("rmbUser", "true", {expires: 7}); // 存储一个带7天期限的 cookie
            $.cookie("userName", userName, {expires: 7}); // 存储一个带7天期限的 cookie
            $.cookie("passWord", passWord, {expires: 7}); // 存储一个带7天期限的 cookie
        }
        else {
            $.cookie("rmbUser", "false", {expires: -1});
            $.cookie("userName", '', {expires: -1});
            $.cookie("passWord", '', {expires: -1});
        }
    }
</script>
</body>
</html>
